window.addEventListener('load',function() {
    var preview_img = document.querySelector('.main-left-mid');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    var bigimg = this.document.querySelector('.bigimg');
    preview_img.addEventListener('mouseover',function() {
        mask.style.display = 'block';
        big.style.display = 'block';

    }) 
    preview_img.addEventListener('mouseout',function() {
        mask.style.display = 'none';
        big.style.display = 'none';

    })
    preview_img.addEventListener('mousemove', function(e) {
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;
        if (maskX <= 0) {
            maskX = 0;
        }
        else if (maskX >= preview_img.offsetWidth - mask.offsetWidth) {
            maskX = preview_img.offsetWidth - mask.offsetWidth;
        }
        else if (maskY <= 0) {
            maskY = 0;
        }
        else if (maskY >= preview_img.offsetHeight - mask.offsetHeight) {
            maskY = preview_img.offsetHeight - mask.offsetHeight;
        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';

        //遮罩层的移动距离 / 遮罩层的最大移动距离 = 大图的移动距离 /大图的最大移动距离
        //遮罩层的移动距离 maskX
        //遮罩层的最大移动距离 
        var maskMax = preview_img.offsetWidth - mask.offsetWidth;
        //大图的最大移动距离
        var bigMax = bigimg.offsetWidth - big.offsetWidth;

        var bigx = maskX * bigMax / maskMax;
        bigimg.style.left = -bigx + 'px';
        bigimg.style.top = -bigx + 'px';

    })
})